<!--
 * @Author: ChunLai
 * @Date: 2023-08-21 15:34:51
 * @LastEditTime: 2024-01-02 20:29:11
 * @Description: 展示客户基本信息
 * @FilePath: \01.latest-short-insure\src\views\form\components\CustomerInfoDesc.vue
-->
<template>
  <div class="user_infos_desc">
    <van-cell-group>
      <!-- <van-cell title="投保人">
        <div class="ftc9">
          <span>{{ applicant.name }}</span>
          <span>/{{ applicant.age }}周岁</span>
          <span>/{{ applicant.sex == "0" ? "男" : "女" }}</span>
          <span v-if="tbrInfoReg.hasOwnProperty('socialInsuFlag')">
            /{{ applicant.socialInsuFlag == "Y" ? "有社保" : "无社保" }}
          </span>
          <div v-if="tbrInfoReg.hasOwnProperty('occupationCode')">
            {{ applicant.occupationCodeName }}
          </div>
        </div>
      </van-cell> -->
      <div class="li_cell_ul">
        <div
          class="li_cell"
          v-for="(item, index) in assuredList"
          :key="`bbr${index}_info`"
        >
          <div class="cell_label cell3_label">
            <span>{{
              `被保人${assuredList.length > 1 ? index + 1 : ""}`
            }}</span>
            <span>【{{ `${item.relationToAppntName}` }}】</span>
          </div>
          <div class="cell_value cell3_value">
            <div>
              {{
                `${item.name}/${item.age}周岁/${item.sex == "0" ? "男" : "女"}`
              }}
              <span v-if="bbrInfoReg.hasOwnProperty('socialInsuFlag')">
                /{{ item.socialInsuFlag == "Y" ? "有社保" : "无社保" }}
              </span>
            </div>
            <div v-if="bbrInfoReg.hasOwnProperty('occupationCode')">
              {{ item.occupationCodeName }}
            </div>
          </div>
        </div>
      </div>
    </van-cell-group>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "CustomerInfoDesc",
  data() {
    return {};
  },
  components: {},
  computed: {
    ...mapGetters({
      assuredList: "insert/assuredList",
      applicant: "insert/applicant",
      inputReg: "infoReg/inputReg",
    }),
    tbrInfoReg() {
      return this.inputReg.applicant;
    },
    bbrInfoReg() {
      return this.inputReg.insured;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.li_cell_ul {
  padding: 0 12px;
}
.cell3_label {
  display: flex;
  width: 120px;
}
.cell3_value {
  flex-direction: column;
  width: calc(100% - 130px);
  align-items: flex-end;
  flex-wrap: wrap;
}
.user_infos_desc {
  /deep/.van-cell__title {
    flex: none;
    width: 60px;
  }
  /deep/.van-cell__value {
    flex: none;
    width: calc(100% - 60px);
  }
}
</style>
